<template>
  <view class="container">
    <view class="course-list">
      <view
          v-for="course in courseList"
          :key="course.id"
          class="course-item"
      >
        <view class="course-info" @click="toDetail(course)">
          <image mode="aspectFill" style="flex-shrink: 0" :src="course.course_logo ? course.course_logo : '/static/course/default.png'" class="course-image"></image>
          <view class="course-detail">
            <text class="course-name">{{ course.course_name }}</text>
            <view class="course-meta">
              <text class="meta-item">{{ course.teacher_name }}</text>
              <text style="flex-shrink: 0" class="meta-item">{{ course.location }}</text>
            </view>
            <view class="course-meta">
              <text class="meta-item">{{ course.course_schedule }}</text>
              <text style="flex-shrink: 0" class="meta-item status" :class="[getStatusClass(course.status)]">{{ getStatusText(course.status) }}</text>
            </view>
          </view>
        </view>
        <view class="course-actions" v-if="course.status === 1">
          <button class="action-btn" @tap="cancelCourse(course)">取消报名</button>
        </view>
      </view>

      <view class="empty-box" v-if="courseList.length === 0">
        <u-empty text="暂无选课记录"></u-empty>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "courses",
  data() {
    return {
      courseList: [],
      student_id: ''
    }
  },
  onLoad(options) {
    this.student_id = options.student_id
    if (!this.student_id) {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
      return
    }
    this.getCourseList()
  },
  methods: {
    toDetail(course) {
      uni.navigateTo({
        url: `/pages/course/detail?id=${course.course_id}`
      })
    },
    getCourseList() {
      uni.showLoading()
      this.$api.getCourseRecordList({
        student_id: this.student_id
      }).then(res => {
        this.courseList = res
      }).finally(() => {
        uni.hideLoading()
      })
    },
    getStatusText(status) {
      const statusMap = {
        0: '已取消',
        1: '已报名',
        2: '已结课'
      }
      return statusMap[status] || status
    },
    getStatusClass(status) {
      const statusMap = {
        0: 'status-canceled',
        1: 'status-active',
        2: 'status-finished'
      }
      return statusMap[status] || ''
    },
    cancelCourse(course) {
      uni.showModal({
        title: '提示',
        content: '确定要取消该课程的报名吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading()
            this.$api.cancelCourseRecord(course.id).then(() => {
              uni.showToast({
                title: '取消成功'
              })
              this.getCourseList()
            }).finally(() => {
              uni.hideLoading()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  height: 100vh;
  overflow: auto;
}

.course-list {
  .course-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;

    .course-info {
      display: flex;

      .course-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
        flex-shrink: 0;
      }

      .course-detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .course-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }

        .course-meta {
          display: flex;
          align-items: center;
          margin-top: 10rpx;

          .meta-item {
            font-size: 26rpx;
            color: #666;
            margin-right: 20rpx;

            &.status {
              padding: 4rpx 12rpx;
              border-radius: 20rpx;
              font-size: 24rpx;

              &.status-active {
                background: #e6f7ff;
                color: #1890ff;
              }

              &.status-canceled {
                background: #fff1f0;
                color: #ff4d4f;
              }

              &.status-finished {
                background: #f6ffed;
                color: #52c41a;
              }
            }
          }
        }
      }
    }

    .course-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #eee;

      .action-btn {
        font-size: 24rpx;
        padding: 10rpx 30rpx;
        border-radius: 30rpx;
        background: #ff4d4f;
        color: #fff;
      }
    }
  }
}

.empty-box {
  padding: 40rpx 0;
}
</style>
